<template>
	<view :style="{ paddingBottom: 10 + 'px' , paddingTop: topHight + 10 + 'px' }">
		<!-- 顶部名字 -->
		<view class="row align minbottom10 min30_rl ">
			
			<view style="flex: 3;">
				<!-- #ifdef MP-WEIXIN -->
				<u-icon name="arrow-left" color="#000" size="22" :bold="true" @click="$jump.navBack"></u-icon>
				<!-- #endif -->
			</view>
			
			<view class="size30 font700 col3 center" style="flex: 3;">
				{{ title }}
			</view>
			<view style="flex: 3;">
			</view>
		</view>

		<!-- 顶部名字 -->
		<!-- 顶部选择 -->
		<view class="row min30">
			<view class="col0 size26 font500 row minau" @tap="addshow = true">
				{{ add }}
				<u-icon name="arrow-down-fill" color="#5C5C5C" size="16"></u-icon>
			</view>
			<!-- <view class=" col0 size26 font500 row minau" @tap="categoryshow = true">
				{{ category }}
				<u-icon name="arrow-down-fill" color="#5C5C5C" size="16"></u-icon>
			</view> -->
			<view class="col0 size26 font500 row minau">
				最近更新
			</view>
		</view>
		<!-- 顶部选择 -->
		<!-- 联系官方 -->
		<!-- <view class="pad20 size26 font500 row" style="color: #FF7A00;background: #FFF3C9;justify-content: center;">
			找不到合适的资源，点击为您联系官方寻找
			<u-icon name="phone-fill" color="#FF7A00" size="18"></u-icon>
		</view> -->
		<!-- 联系官方 -->
		<!-- 列表 -->
		<view class="empty" style="margin-top: 300rpx;" v-if="list.length == 0">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
		<view class="min30_rl mintop30" v-else>
			<view v-for="(item,index) in list" @click="item.hire ?  $jump.nav('/indexpackage/sell_info?id=' + item.id) : $jump.nav('/indexpackage/machinery_info?id=' + item.id)">
				<view class="rad2 minbottom30 row" style="box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(206,188,172,0.24);">
					<image :src="item.full_images" style="width: 35%;height: 240rpx;border-radius: 20rpx 0 0 20rpx;">
					</image>
					<view class="column" style="padding: 20rpx;width: 59%;">
						<view class="row">
							<view class="font700 size30 col0 omit1" style="max-width: 240rpx;">
								{{ item.title }}
							</view>
							<view class="font500 size24 disflex align rad2 minleft20"
								style="background-color: #FFF3C9;color: #FF7A00;padding: 0 20rpx;"  v-if="user_id">
								{{ item.fees[0].value }}
							</view>
						</view>
						<view class="minto minbottom0">
							<view class="row size26 font500 align minbottom10" style="color: #808080;">
								司机：{{ item.driver }}
							</view>
							<view class="row size24 font500 align minbottom10" style="color: #808080;">
								{{ item.address }}
							</view>
							<view class="row size24 font500 align" style="color: #FF7A00;">
								合作社已认证
								<!-- <view class="minau minright0 col0">
									{{ item.distance }}
								</view> -->
							</view>
						</view>
					</view>
				</view>
				<!-- v-if="item.type == '农机'" <view class="rad2 minbottom30 row" style="box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(206,188,172,0.24);" v-else>
					<image :src="item.img_url" style="width: 35%;height: 240rpx;border-radius: 20rpx 0 0 20rpx;">
					</image>
					<view class="column" style="padding: 20rpx;width: 59%;">
						<view class="font700 size30 col0 minbottom10">
							{{ item.title }}
						</view>
						<view class="row">
							<view class="font500 size22 rad2"
								style="background-color: #DEEFD6;color: #60884D;padding: 2rpx 14rpx;">
								{{ item.type }}
							</view>
							<view class="font500 size22 rad2 minleft10"
								style="background-color: #FFF3C9;color: #FF7A00;padding: 2rpx 14rpx;">
								{{ item.origin }}
							</view>
						</view>
						<view class="minto minbottom0">
							<view class="row size22 font500 align minbottom10" style="color: #808080;">
								<view class="size24" style="color: #FF2D10;">
									￥
								</view>
								<view class="size28 font700" style="color: #FF2D10;">
									{{ item.price }}
								</view>
								<view class="size24 col3 minleft10 font500">
									元/亩/年
								</view>
								<view class="minau minright0">
									{{ item.time }}年
								</view>
							</view>
							<view class="row size22 font500 align" style="color: #808080;">
								<image src="@/static/index/land.png" mode="" style="width: 30rpx;height: 30rpx;">
								</image>
								{{ item.size }}
								<view class="minau minright0">
									{{ item.address }}
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<view style="margin-top: 50rpx;"><u-loadmore :status="status" /></view>
		</view>
		<!-- 列表 -->
		<!-- 类目选择器 -->
		<u-picker :show="categoryshow" keyName="title" :columns="columns" @confirm="categoryConfirm"
			@cancel="categoryCancel"></u-picker>
		<!-- 类目选择器 -->
		<!-- 省县区选择器 -->
		<u-picker :show="addshow" ref="uPicker" keyName="name" :columns="addlist" @confirm="addConfirm"
			@cancel="addCancel" @change="changeHandler"></u-picker>
		<!-- 省县区选择器 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topHight: '',
				title: '',
				classify_id: '',
				address_id: '',
				category_id: '',
				user_id: '',
				add: '选择区域',
				category: '类目',
				page: 1,
				addshow: false,
				categoryshow: false,
				columns: [],
				addlist: [],
				columnsList: [],
				list: []
			}
		},
		onLoad(op) {
			let app = uni.getSystemInfoSync()
			this.topHight = app.statusBarHeight
			// #ifdef MP-TOUTIAO
			this.topHight = 5
			// #endif
			this.title = op.title
			this.classify_id = op.classify_id
			
		},
		onShow() {
			this.user_id = uni.getStorageSync('user_id');
			this.getList()
			this.getCategory()
			this.getAreaList()
		},
		onReachBottom() {
			if (this.page < 0) return;
			this.status = 'loading';
			this.page = ++this.page
			this.getBuyList()
			setTimeout(() => {
				console.log(this.loadmore);
				if (this.loadmore.length == 0) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		methods: {
			async getList() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletHome/classifyProduct", {
					classify_id: this.classify_id,
					land_location: this.address_id,
					page: this.page,
					type: 3
				})
				if (code == 1) {
					if (this.page != 1) {
						this.loadmore = data.items
						for (var i = 0; i < data.items.length; i++) {
							this.list.push(data.items[i]); // 加载的数据追加在上一页后面
						}
					} else {
						this.loadmore = data.items
						this.list = data.items
					}
				} else {
					console.log(msg);
				}
			},
			async getCategory() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletAsking/CategoryList")
				if (code == 1) {
					this.columns = [data]
				} else {
					console.log(msg);
				}
			},
			async getAreaList() {
				let departmentColumns = [] //部门岗位数据
				let originalColumns = [] //默认的子数据
				let thirdData = []
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletAsking/AreaList")
				if (code == 1) {
					this.columnsList = data //选择数据
					//初始数据
					departmentColumns = data
					if (data[0].children == null) {
						originalColumns = []
					} else {
						originalColumns = data[0].children //第一层下面的第二层数据
					}
					if (originalColumns[0].children == null) {
						thirdData = []
					} else {
						thirdData = originalColumns[0].children //第二层下面的第三层数据
					}
					this.addlist = [departmentColumns, originalColumns, thirdData]
				} else {
					console.log(msg);
				}
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					let items = this.columnsList[index].children.map((e) => {
						return e
					})
					picker.setColumnValues(1, items)
					items = this.columnsList[index].children[0].children.map((e) => {
						return e
					})
					picker.setColumnValues(2, items)
				}
				if (columnIndex === 1) {
					let items = this.columnsList[indexs[0]].children[index].children.map(
						(e) => {
							return e
						})
					picker.setColumnValues(2, items)
				}
			},
			addCancel() {
				this.add = '选择区域'
				this.address_id = ''
				this.page = 1
				this.getList()
				this.addshow = false
			},
			addConfirm(e) {
				var addarr = []
				e.value.map((e) => {
					addarr.push(e.id)
				})
				this.address_id = addarr.toString()
				this.add = e.value[2].name
				console.log(this.address_id)
				this.page = 1
				this.getList()
				this.addshow = false
			},
			categoryCancel() {
				this.category = '类目'
				this.classify_id = ''
				this.page = 1
				this.getList()
				this.categoryshow = false
			},
			categoryConfirm(e) {
				this.category = e.value[0].title
				this.classify_id = e.value[0].id
				this.page = 1
				this.getList()
				this.categoryshow = false
			},
		}
	}
</script>

<style scoped lang="less">

</style>